<template>
  <section class="adoption-cases py-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="section-header text-center mb-5">
            <p class="about_line"></p>
            <h2 class="about_h2">领养案例</h2>
            <p class="case_p">ADOPTION CASE</p>
          </div>
          
          <div class="row">
            <div 
              v-for="adoptionCase in adoptionCases" 
              :key="adoptionCase.id"
              class="col-sm-6 col-lg-3 mb-4"
            >
              <div class="adoption-card text-center">
                <div class="adoption-image-wrapper mb-3">
                  <router-link :to="`/adoption-cases/${adoptionCase.id}`">
                    <img 
                      :src="adoptionCase.image" 
                      :alt="adoptionCase.name"
                      class="img-circle adoption-image"
                      @error="handleImageError"
                    >
                  </router-link>
                </div>
                <div class="adoption-info">
                  <h5 class="adoption-name">
                    <router-link 
                      :to="`/adoption-cases/${adoptionCase.id}`"
                      class="text-decoration-none"
                    >
                      {{ adoptionCase.name }}
                    </router-link>
                  </h5>
                  <p class="adoption-status text-muted small">
                    {{ adoptionCase.status }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="text-center mt-4">
            <router-link to="/adoption-cases" class="btn btn-primary btn-lg">
              查看更多领养案例
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AdoptionCases',
  data() {
    return {
      adoptionCases: [
        {
          id: 1,
          name: 'coco的领养案例',
          image: require('@/assets/images/20230417/1681740318301726.jpg'),
          status: '已成功领养'
        },
        {
          id: 2,
          name: '小雪',
          image: require('@/assets/images/20230424/1682332942505948.jpg'),
          status: '已成功领养'
        },
        {
          id: 3,
          name: '阿呆',
          image: require('@/assets/images/20230423/1682257069276480.jpg'),
          status: '已成功领养'
        },
        {
          id: 4,
          name: '米奇',
          image: require('@/assets/images/20230423/1682257047659615.jpg'),
          status: '已成功领养'
        }
      ]
    }
  },
  methods: {
    handleImageError(event) {
      // 如果图片加载失败，显示默认样式
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.pet-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'pet-error-placeholder'
        placeholder.style.cssText = 'width:150px;height:150px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;margin:0 auto;'
        placeholder.textContent = '🐾'
        parent.appendChild(placeholder)
      }
    }
  }
}
</script>

<style scoped>
.adoption-cases {
  background: white;
}

.adoption-card {
  transition: all 0.3s ease;
}

.adoption-card:hover {
  transform: translateY(-3px);
}

.adoption-image-wrapper {
  position: relative;
  display: inline-block;
}

.adoption-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.adoption-image:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.adoption-name a {
  color: #333;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.adoption-name a:hover {
  color: #04A07B;
}

.adoption-status {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.btn-primary {
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 160, 123, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .adoption-image {
    width: 120px;
    height: 120px;
  }
  
  .adoption-name a {
    font-size: 1rem;
  }
  
  .btn-primary {
    padding: 10px 25px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .adoption-cases {
    padding: 3rem 0;
  }
  
  .adoption-image {
    width: 100px;
    height: 100px;
  }
  
  .adoption-name a {
    font-size: 0.95rem;
  }
  
  .adoption-status {
    font-size: 0.85rem;
  }
}
</style>
